

function CISlideView (opts) {
    this.index = 0;             // 当前id
    this.lastIndex = null;      // 上一次的id
    this.items = null;          // 显示元素集合
    this.count = 0;             // 显示元素个数
    this.direction = 'H';       // 移动方向 H:水平, V:垂直
    this.isShowDots = false;    // 是否显示索引点
    this.zoom = -10;            // 移动时Y轴的景深
    this.onShow = null;         // 显示元素时候的回调 function (index) {}
    this.onHide = null;         // 移出元素时候的回调 function (index) {}
    this.isDebug = false;       // 是否显示log
    this.logWrap = null;        // log 容器

    if (opts) {
        this.init(opts);
    }
}

CISlideView.prototype.init = function (opts) {
    opts = opts || {};
    var el = this.el = opts.el;
    this.items = el.getElementsByClassName('item');
    this.count = this.items.length;
    this.direction = opts.direction || this.direction;
    this.index = opts.index || this.index;
    this.isShowDots = opts.isShowDots || this.isShowDots;
    this.zoom = opts.zoom || this.zoom;
    this.onShow = opts.onShow;
    this.onHide = opts.onHide;
    this.isDebug = opts.isDebug || this.isDebug;

    this.render();
    this._bindEvent();
};

CISlideView.prototype.render = function () {
    this.size = {
        width: window.innerWidth,
        height: window.innerHeight
    };
    this.el.style.width = this.size.width + 'px';
    this.el.style.height = this.size.height + 'px';

    
    for (var i = 0; i < this.count; i++) {
        if ('H' == this.direction) {
            // 水平展示，将所有元素横向平铺
            this.translate3d(this.items[i], this.size.width * i, 0, 0);
        } else if ('V' == this.direction) {
            // 纵向展示，将所有元素叠加在屏幕下方
            if (i == 0) {
                this.translate3d(this.items[i], 0, 0, 0);
            } else {
                this.translate3d(this.items[i], 0, this.size.height, 0);
            }
        }
    }

    
    if (this.isShowDots && !this.dots) {
        var ul = document.createElement('ul');
        ul.className = 'dots';
        var dots = [];
        for (var i = 0; i < this.count; i++) {
            var li = document.createElement('li');
            if (i == this.index) {
                li.className = 'current';
            }
            dots.push(li);
            ul.appendChild(li);
        }
        this.el.appendChild(ul);
        this.dots = dots;
    }

    // this.turnTo(this.index);

    if (this.isDebug && !this.logWrap) {
        this.logWrap = document.createElement('div');
        this.logWrap.className = 'log';
        this.el.appendChild(this.logWrap);
    }
};

CISlideView.prototype._bindEvent = function () {
    var self = this;
    this.el.addEventListener('touchstart', function (evt) {
        // console.log('touchstart', evt);
        self.startTime = (new Date()).value;
        self.startX = evt.touches[0].clientX;
        self.startY = evt.touches[0].clientY;
        self.offsetX = 0;
        self.offsetY = 0;
    });

    this.el.addEventListener('touchmove', function (evt) {
        // console.log('touchmove', evt);
        evt.preventDefault();
        self.offsetX = evt.touches[0].clientX - self.startX;
        self.offsetY = evt.touches[0].clientY - self.startY;

        if ('H' == self.direction) {
            // 水平展示，平移相邻3个元素
            for (var i = self.index - 1; i <= self.index + 1; i++) {
                var item = self.items[i];
                if (item) {
                    item.style.webkitTransition = 'none';
                    var x = self.offsetX + self.size.width * (i - self.index);
                    self.translate3d(item, x, 0, self.zoom);
                }
            }
        } else if ('V' == self.direction) {
            // 垂直展示，移入下一个元素
            self.log('offsetY=' + self.offsetY);
            if (self.offsetY < 0) {
                if (self.index < self.count - 1) {
                    var currentItem = self.items[self.index];
                    if (currentItem) {
                        currentItem.style.webkitTransition = '-webkit-transform 0.25s ease-out';
                        self.translate3d(currentItem, 0, 0, self.zoom);
                    }
                    var nextItem = self.items[self.index + 1];
                    if (nextItem) {
                        nextItem.style.webkitTransition = 'none';
                        var y = self.offsetY + self.size.height;
                        self.translate3d(nextItem, 0, y, 0);
                    }
                }
            } else if (self.offsetY > 0) {
                if (self.index > 0) {
                    var item = self.items[self.index];
                    if (item) {
                        item.style.webkitTransition = 'none';
                        var y = self.offsetY;
                        self.translate3d(item, 0, y, 0);
                    }
                }
            }
        }
    });

    this.el.addEventListener('touchend', function (evt) {
        if ('H' == self.direction) {
            var boundary = self.size.width / 8;
            var time = (new Date()).value;
            if (time - this.startTime < 300) {
                boundary = self.size.width / 10;
            }
            self.log('touchend offsetX=' + self.offsetX);
            if (self.offsetX >= boundary) {
                self.turn(-1);  // 去上一页
            } else if (self.offsetX <= -boundary) {
                self.turn(1);  // 去下一页
            } else {
                self.turn(0);  // 留在本页
            }
        } else if ('V' == self.direction) {
            var boundary = self.size.height / 8;
            var time = (new Date()).value;
            if (time - this.startTime < 300) {
                boundary = self.size.height / 10;
            }
            if (self.offsetY >= boundary) {
                self.log('prev');
                self.turn(-1);  // 去上一页
            } else if (self.offsetY <= -boundary) {
                self.log('next');
                self.turn(1);  // 去下一页
            } else {
                self.log('return to ' + self.index);
                self.turn(0);  // 留在本页
            }
        }
    });
};


CISlideView.prototype.turn = function (step) {
    this.turnTo(this.index + step);
};


CISlideView.prototype.turnTo = function (index) {
    if (index > this.count - 1) {
        index = this.count - 1;
    } else if (index < 0) {
        index = 0;
    }
    this.index = index;

    if ('H' == this.direction) {
        for (var i = index - 1; i <= index + 1; i++) {
            var item = this.items[i];
            if (item) {
                var x = this.size.width * (i - index);
                item.style.webkitTransition = '-webkit-transform 0.25s ease-out';
                this.translate3d(item, x, 0, 0);
            }
        }
    } else if ('V' == this.direction) {
        if (this.index > this.lastIndex) {
            // 向上移入
            var item = this.items[this.index];
            if (item) {
                item.style.webkitTransition = '-webkit-transform 0.25s ease-out';
                this.translate3d(item, 0, 0, 0);
            }
        } else if (this.index < this.lastIndex) {
            // 向下移动出
            var prevItem = this.items[this.index];
            if (prevItem) {
                prevItem.style.webkitTransition = '-webkit-transform 0.25s ease-out';
                this.translate3d(prevItem, 0, 0, 0);
            }
            var item = this.items[this.index + 1];
            if (item) {
                item.style.webkitTransition = '-webkit-transform 0.25s ease-out';
                this.translate3d(item, 0, this.size.height, 0);
            }
        } else {
            var item = this.items[index];
            if (item) {
                item.style.webkitTransition = '-webkit-transform 0.25s ease-out';
                this.translate3d(item, 0, 0, 0);
            }

            var nextItem = this.items[this.index + 1];
            if (nextItem) {
                nextItem.style.webkitTransition = '-webkit-transform 0.25s ease-out';
                this.translate3d(nextItem, 0, this.size.height, 0);
            }
        }
    }

    if (this.dots) {
        for (var i = 0; i < this.count; i++) {
            var className = this.dots[i].className;
            this.dots[i].className = className.replace('current', '');
        };
        this.dots[this.index].className = 'current';
    }

    if ('function' == typeof this.onShow && this.index != this.lastIndex) {
        this.onShow(this.index);
    }
    if ('function' == typeof this.onHide) {
        this.onHide(this.lastIndex);
    }
    this.lastIndex = this.index;
};


CISlideView.prototype.translate3d = function(el, x, y, z) {
    var style = 'translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px)';
    el.style.webkitTransform = style;
};


CISlideView.prototype.log = function(message) {
    if (this.isDebug) {
        this.logWrap.innerText = message;
    }
};
